標題聽起來很厲害(?)，不過今天只需要認識一個 Web API - Element.getBoundingClientRect()～

getBoundingClientRect

此元素方法會回傳一個DOMRect物件，物件中會包含選取元素的尺寸和坐標資訊，除了元素的高度和寬度以外，其他的屬性都會依據元素當下相對 viewport 的左上角計算距離

換句話說，當上下滾動頁面時，y / top的距離會變動，左右滾動頁面時，x / left的距離會變動
可以用codepen連結觀察看看

在有滾動頁面的情況下，要取得特定元素相對於文件（Document）左上角的位置時就需要加上滾動的距離，計算公式如下：

元素相對於文件的水平距離： x / left + window.scollX
元素相對於文件的垂直距離： y / top + window.scrollY

圖片來源：MDN

• width: 選取元素的寬度
• height: 選取元素的高度
• x / left: 元素左上角相對視窗的水平距離
• right: 元素右下角相對視窗的距離
• y / top: 元素左上角相對視窗的垂直距離

實作練習

註：以下練習來自於 JavaScript 30

原理及步驟：

1. 建立一個跟著游標走的鎂光燈元素<span>並加入到頁面中

const spotlight = document.createElement('span');
document.body.append(spotlight);
spotlight.classList.add('spotlight');

2. • 鎂光燈元素必須依照點選的連結大小（寬度＆高度）變換
   • 當頁面捲動時，需要校正鎂光燈元素位置
   • 當滑鼠進入連結位置，替鎂光燈設置一樣的座標

function highlightLink() {
  const linkInfo = this.getBoundingClientRect();
  
  // 位置校正
  const coordinate = {
    width: linkInfo.width,
    height: linkInfo.height,
    left: linkInfo.left + scrollX,
    top: linkInfo.top + scrollY,
  }
  
  spotlight.style.width = `${coordinate.width}px`;
  spotlight.style.height = `${coordinate.height}px`;
  spotlight.style.transform = `translate(${coordinate.left}px, ${coordinate.top}px)`;
}

3. 將所有連結綁上事件監聽器，並在滑鼠進入元素時觸發

const links = document.querySelectorAll('a');

links.forEach(link => {
  link.addEventListener('mouseenter', highlightLink);
})

codepen連結

參考資料：

MDN
JavaScript30